<template>
  <div class="account-main">
    <div class="top" v-show="!act">
      <div class="top-left">
        <div class="top-part">
          <img class="logo" v-lazy="publicUrl(storeInfo.img)" />
          <div class="name">
            <span class="overOne">{{ storeInfo.title }}</span>
          </div>
          <div class="id">ID: {{ storeInfo.id }}</div>
        </div>

        <div class="bottom-part">
          <div class="part">
            <span class="overOneSpec">{{ storeInfo.order_num }}</span>
            <span>消费订单数</span>
          </div>
          <div class="part">
            <span class="overOneSpec">{{ storeInfo.order_price }}</span>
            <span>消费总金额(元)</span>
          </div>
        </div>
      </div>
      <div class="top-right">
        <div class="top-title">
          <span>我的资产</span>
          <img
            class="thumb"
            @click="() => (open = !open)"
            :title="open ? `隐藏` : `展示`"
            :src="
              publicUrl(
                open ? `/images/login-eyes.png` : `/images/eyes-close.png`
              )
            "
          />
        </div>

        <div class="bottom">
          <div class="bottom-part">
            <div class="number">{{ storeInfo.coupon_num }}</div>
            <div class="text">优惠券(张)</div>
          </div>
          <div class="bottom-part">
            <div class="number">
              {{ open ? twoFixed(storeInfo.platform_balance) : `*******` }}
            </div>
            <div class="text">平台余额 (元)</div>
          </div>
          <div class="bottom-part">
            <div class="number">
              {{ open ? twoFixed(storeInfo.eCash) : `*******` }}
            </div>
            <div class="text">电子现金 (元)</div>
          </div>
          <div class="bottom-part">
            <div class="number">
              {{ open ? twoFixed(storeInfo.rebateAmount) : `*******` }}
            </div>
            <div class="text">返利金额(可提现)</div>
          </div>
          <div class="bottom-part">
            <div class="number">
              {{ open ? twoFixed(storeInfo.amountInvoiced) : `*******` }}
            </div>
            <div class="text">可开发票金额(元)</div>
          </div>
          <div class="bottom-part">
            <div class="number">
              {{ open ? twoFixed(storeInfo.commission) : `*******` }}
            </div>
            <div class="text">分销佣金(元)</div>
          </div>
        </div>
      </div>
    </div>

    <div class="center" v-show="!act">
      <span>数据中心</span>
      <div class="date"><DatePicker :date="date" /></div>
    </div>
   <div v-show="!act">
    <div class="column-part" v-for="item in orderStatic" >
      <OrderRow
        :big-title="item?.big_title"
        :width="item?.width"
        :row="item?.data"
      />
    </div>
    </div>

    <div class="column-part" ref="orderTable" :style="{marginTop: !act? '.1rem' :  '0'}">
      <Order
        :showTitle="true"
        :orderData="orderData"
        v-model:activeName="activeName"
      >
        <template #operation="{ row }">
          <div class="operation">
            <div class="title thumb">订单详情</div>
            <div class="title thumb">查看物流</div>
            <div class="title thumb">订单退回</div>
            <div class="title thumb">申请售后</div>
            <div class="title thumb">复购</div>
          </div>
        </template>
      </Order>
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { ref, computed, watch,nextTick } from "vue";
import { publicUrl, twoFixed } from "@/utils/util";
import DatePicker from "@/components/DatePicker/index.vue";
import OrderRow from "@/components/OrderRow/index.vue";
import Order from "@/components/Order/index.vue";
import orderData from "@/json/myOrder.json";
import { useRoute } from "vue-router";

import { useWindowSize   } from '@vueuse/core';

interface StoreInfo {
  img: string;
  title: string;
  id: string;
  order_num: number;
  order_price: number;
  coupon_num: number;
  platform_balance: number;
  eCash: number;
  rebateAmount: number;
  amountInvoiced: number;
  commission: number;
}

interface OrderItem {
  big_title: string;
  width?: string;
  data: Array<{
    title: string;
    value: string | number;
  }>;
}

interface OrderStatic {
  mtmOrder?: OrderItem;
  fabricOrder?: OrderItem;
  spotOrder?: OrderItem;
}

const route = useRoute();

const act = computed(() => route.query.act);

const activeName = ref<number>(0);

const orderTable = ref<any>(null);

// const { top } = useElementBounding(orderTable)
const { width:windosWidth } = useWindowSize()

// nextTick(()=>{
//      console.log(orderTable.value.offsetTop)
// })

watch(
  () => act.value,
  (newValue) => {

    switch (newValue) {
      case "0":
      case "1":
      case "2":
      case "3":
      case "4":
      case "5":
      case "6":
        activeName.value = Number(newValue);
        nextTick(()=>{
          
                document.documentElement.scrollTop = orderTable.value.offsetTop + (windosWidth.value/10.5) ;

            
        } )
        break;
      default:
        activeName.value = 0;
        document.documentElement.scrollTop = 0;
        break;
    }
  },
  { immediate: true }
);

const orderStatic = ref<OrderStatic>({
  mtmOrder: {
    big_title: `MTM定制订单 (含MTM订单、团单)`,
    width: undefined,
    data: [
      {
        title: `订单总数`,
        value: 20,
      },
      {
        title: `接待订单`,
        value: 20,
      },
      {
        title: `生产中订单`,
        value: 20,
      },
      {
        title: `待发货`,
        value: 20,
      },
      {
        title: `晚期订单`,
        value: 30,
      },
      {
        title: `售后订单`,
        value: 30,
      },
      {
        title: `下单金额`,
        value: twoFixed(30),
      },
    ],
  },
  fabricOrder: {
    big_title: `面料订单`,
    width: ".98rem",
    data: [
      {
        title: `订单总数`,
        value: 20,
      },
      {
        title: `接待订单`,
        value: 20,
      },
      {
        title: `待发货`,
        value: 20,
      },
      {
        title: `待收货`,
        value: 30,
      },
      {
        title: `售后订单`,
        value: 30,
      },
      {
        title: `下单金额`,
        value: twoFixed(30),
      },
    ],
  },
  spotOrder: {
    big_title: `现货订单/辅料订单/样册`,
    width: ".98rem",
    data: [
      {
        title: `订单总数`,
        value: 20,
      },
      {
        title: `接待订单`,
        value: 20,
      },
      {
        title: `待发货`,
        value: 20,
      },
      {
        title: `待收货`,
        value: 20,
      },
      {
        title: `售后订单`,
        value: 30,
      },
      {
        title: `下单金额`,
        value: twoFixed(30),
      },
    ],
  },
});

const storeInfo = ref<StoreInfo>({
  img: `/images/user-avatar.png`,
  title: `云裁中台`,
  id: `2023010700001`,
  order_num: 30030003000300030000,
  order_price: 10000010000000,
  coupon_num: 8,
  platform_balance: 50000,
  eCash: 50000,
  rebateAmount: 50000,
  amountInvoiced: 50000,
  commission: 50000,
});

const date = ref<any>(undefined);

const open = ref<boolean>(false);
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
